

.resultPage{
    box-sizing: border-box;
    width:100vw;
    padding-bottom:25vw;
    &-rankshow{
        position: relative;
        padding-bottom:6vw;
        background: linear-gradient(to right, #fd4e2e, #ff9a1d);
        &-topbtn{
            display:flex;
            justify-content: space-around;
            line-height: 3;
            font-size:5vw;
            color:#fff;
        }
        &-topbtn>div{
            box-sizing: border-box;
            border-bottom:2px solid rgba(0,0,0,0);
            height:2.5em;
        }
        &-topbtn>div.active{
            border-bottom:2px solid #fff;
        }
        &-person{
            position:relative;
            min-height:50vw;
            width:86vw;
            margin:6vw auto 0;
            border-radius: 2vw;
            background-color:#fff;
            perspective: 83vw;
            -webkit-perspective: 83vw;
            &-user{
                position: absolute;
                z-index: 10;
                top:5vw;
                left:0;
                width:100%;
                display:flex;
                &-item{
                    position:relative;
                    width:33.33%;
                    img{
                        display:block;
                        margin:auto;
                        width:20vw;
                        height:20vw;
                        border-radius: 50%;
                    }
                    h5{
                        font-size:4.2vw;
                        text-align: center;
                        color:$content-text-black;
                    }
                    p{
                        font-size:4vw;
                        text-align: center;
                        color:#ff1848;
                    }
                    &-noimg1{
                        position: absolute;
                        z-index: 10;
                        widows: 20vw !important;
                        height:auto!important;
                        left:4.5vw;
                        top:16vw;
                    }
                    &-noimg2{
                        position: absolute;
                        z-index: 10;
                        width: 10vw !important;
                        height:auto!important;
                        border-radius: 0%!important;
                        right:2vw;
                        top:-3vw;
                    }
                }
                &-item:nth-of-type(2){
                    transform: rotateX(-60deg) translateZ(15vw) translateY(-23vw);
                }
            }
        }
        &-person-midarea{
            position: absolute;
            border-right:3px solid rgba(0,0,0,.3);
            border-left:3px solid rgba(0,0,0,.3);
            z-index: 3;
            top:-9vw;
            left:29vw;
            margin:auto;
            width:28vw;
            height:55vw;
            transform: rotateX(-60deg);
            border-top-left-radius: 2vw;
            border-top-right-radius: 2vw;
            background-color:#fff;
        }
        &-person-midarea2{
            display:none;
            position: absolute;
            z-index: 2;
            top:-5.8vw;
            left:28vw;
            margin:auto;
            width:30vw;
            height:50vw;
            transform: rotateX(-59.5deg);
            background-color:rgba(0,0,0,0.25);
        }
    }
    &-riqi{
        &-btn{
            display:flex;
            justify-content: center;
            padding:4vw 0;
            li{
                width:20vw;
                text-align: center;
                background-color:#fff;
                border:1px solid #fd562c;
                color:#fd562c;
                border-right:0;
                line-height: 2;
            }
            li.active{
                background-color:#fd562c;
                color:#fff;
            }
            li:last-of-type{
                border-right:1px solid #fd562c;
                border-top-right-radius: 1em;
                border-bottom-right-radius: 1em;
            }
            li:first-of-type{
                border-top-left-radius: 1em;
                border-bottom-left-radius: 1em;
            }
        }
        &-info{
            display:flex;
            justify-content: space-around;
            p{
                text-align: center;
            }
            &>div{
                box-sizing: border-box;
                width:33.3vw;
            }
            &>div:nth-of-type(2){
                border-left:1px solid $content-text-gray;
                border-right:1px solid $content-text-gray;
            }
            &>div p:nth-of-type(1){
                font-size:4.2vw;
                color:$content-text-gray;
            }
            &>div p:nth-of-type(2){
                color:$content-text-oringe;
                font-size:4vw;
                span{
                    line-height: 2;
                    margin-right:5px;
                    font-size:6vw;
                    color:$content-text-black;
                }
            }
        }
    }
}